<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <meta name="referrer" content="origin">
    <title>活动列表 - 日新网</title>
    <link rel="stylesheet" href="__TMPL__Public/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/reset.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/style.css">
    <script type="text/javascript" src="__TMPL__Public/assets/js/rem.js"></script>
</head>
<style>
    .tab_nav {
        height: 1.4rem !important;
        background-color: #333333;
        margin-top: -.046rem !important;
    }

    .tab_nav ul {
        height: 1.4rem !important;
    }

    .tab_nav .active {
        color: #ffffff;
    }

    .tab_nav li {
        width: 24.9% !important;
        height: 100%;
        line-height: 1.4rem;
        font-size: .38rem;
        color: #c5c5c5;
    }

    .carousel-inner .item {
        height: 3rem;

    }

    .carousel-inner .item img {
        width: 100%;
        height: 100%;
    }

    .tab_content h3 {
        font-size: .26rem;
        color: #000232;
        margin: 0 0 .2rem .3rem;
        padding-top: .3rem;
    }

    .tab_nav .active {
        color: #fff !important;
    }

    .questions_btm span:not(:last-child):after {
        content: "、";
    }

    .td3, .td5 {
        line-height: .81rem !important;
    }

    .tab_content .object_item .td5 {
        width: 1.36rem;
        overflow: hidden;

    }

    .tab_content .object_item .td3, .tab_content .object_item .td5 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .footer a:nth-child(2) span {
        color: #c8161d;
    }

    .carousel-inner {
        height: 4.28rem;

    }

    /*搜索页内容*/
    .search_top {
        width: 5.68rem;
        height: 30px;
        border-bottom: 1px solid #000232;
        margin: .6rem auto .34rem;
        line-height: 1;
    }

    .search_top input {
        border: none;
        background-color: #F9f9f9;
        height: 28px;
        padding-left: 5px;
        width: 5rem;
        display: inline-block;
        font-size: 16px;
    }

    .search_top span {
        display: inline-block;
        height: 28px;
        width: 28px;
        background: url("/themes/simplebootx_mobile/Public/assets/images/ss.png") no-repeat center;
        background-size: 18px 18px;
        float: right;
    }

    .active_list {
        padding: 0 .10rem;
    }
    .active_list .active_item {
        margin-bottom: .4rem;
        background-color: #fff;
        position: relative;
        box-shadow: 0px 3px 6px 0px
        rgba(0, 0, 0, 0.16);
        border-radius: 10px;
    }
    .active_item .img_ground {
        width: 2.8rem;
        height: 2rem;
        float: left;
    }
    .active_item .img_ground img {
        width: 100%;
        height: 100%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .active_item .text {
        padding-left:2.94rem;
        padding-right: .14rem;
    }
    .active_item .text .active_form {
        font-size: .22rem;
        line-height: 1;
        margin-top: .08rem;
        color: #333333;

    }
    .active_item .text .title {
        font-size: .26rem;
        color: #333333;
        font-weight: bolder;
        line-height: .34rem;
        height: .64rem;
        /*min-height: .5rem;*/
        /*vertical-align: middle;*/
        margin-top: .08rem;
        display: table-cell;
        vertical-align: middle;
        overflow: hidden;
    }
    .active_item .text .keyword ,.active_item .text .timer ,.active_item .text .addr {
        font-size: .22rem;
        color: #333333;
        line-height: 1;
        margin-top: .08rem;
    }

        /*标签样式？*/
    .active_item .active_icon {
        position: absolute;
        top: -.14rem;
        left: .18rem;
        width: .3rem;
        height: .8rem;
        background-color: #c5c5c5;
        font-size: .20rem;
        line-height: .22rem;
        text-align: center;
        color: #fff;
        padding-top: .06rem;
    }

    .active_item .active {
        background-color: #e3252d;
    }

    .result_tip {
        font-size: 14px;
        color: #333333;
        font-weight: bolder;
        text-align: center;
        margin-bottom: .36rem;
    }
</style>
<body>
<!--nav-->
<tc_include file="Public:nav"/>
<!--轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <php>
        $hot_articles = get_slide_show_by_position(12, 0, 3);
        $show_slide = count($hot_articles) > 1;
    </php>
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <if condition="$show_slide">
            <volist name="hot_articles" id="vo">
                <li data-target="#carousel-example-generic" data-slide-to="{$key}"
                    class="{$key == 0 ? 'active' : ''}"></li>
            </volist>
        </if>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <volist name="hot_articles" id="vo">
            <php>
                $smeta=json_decode($vo['smeta'], true);
            </php>
            <div class="item {$key == 0 ? 'active' : ''}">
                <a href="{$vo.post_source}"><img src="{$vo.img}" style="" alt="..."></a>
            </div>
        </volist>
    </div>

    <!-- Controls -->
    <if condition="$show_slide">
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"
           style="">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"
           style="">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </if>
</div>
<!--搜索框-->
<div class="search_top">
    <input type="text" id="act_search" name="search" value="{$search}" style="cursor: pointer;text-align: center;">
    <span class="searhc_btn"></span>
</div>
<!--提示搜索结果-->
<if condition="!empty($search)">
    <p class="result_tip">有关“<span>{$search}</span>”的搜索结果</p>
</if>

<div class="active_list">
    <volist name="lists" id="vo">
        <a class="act_item" href="{$vo.link_addr}">
            <div class="active_item clearfix">
                <div class="img_ground">
                    <img src="{:sp_get_asset_upload_path($vo['thumb']['thumb'])}" alt="">
                </div>
                <div class="text">
                    <p class="active_form">{$vo.form_type_name}</p>
                    <p class="ellipsis2 title">{$vo.name}</p>
                    <p class="keyword">{$vo['label_names'][0]}</p>
                    <p class="timer"><span>{$vo.start_time}</span> - <span>{$vo.end_time}</span></p>
                    <p class="addr">{$vo.city_name}</p>
                </div>
                <span class="active_icon {$vo['act_status_code'] == 3 ? '' : 'active'}">{$vo.act_status}</span>
            </div>
        </a>
    </volist>
</div>

<div style="height: .5rem;line-height: .5rem;background-color: #efdddd;" class="js-infinite-scroll-loading text-center">更多活动</div>
<div id="nextpage"></div>

<!--页脚-->
<tc_include file="Public:footer"/>

<script type="text/javascript" src="__TMPL__Public/assets/js/jquery.1.12.4.js"></script>
<script src="__TMPL__Public/assets/js/bootstrap.min.js"></script>
<script src="__TMPL__Public/assets/js/jquery.infiniteScroll.js"></script>
<script>
    $(document).ready(function () {
        $('.searhc_btn').click(function () {
            var search = $('#act_search').val();
            window.location.href = "{:U('Activity/Activity/activity_list')}" + "&search=" + search;
        });

        $('#nextpage').infiniteScroll({
            loading: '.js-infinite-scroll-loading',
            total_pages: {$total_pages},
            success: function (content) {
                var $items = $(content).find('.act_item');
                console.log($items.length);
                if ($items.length > 0) {
                    $('.active_list').append($items);
                }
            }
        });
    })
</script>
</body>
</html>